<style>
</style>
<template>
  <div id="addr">
    <h1>历史经纬度信息管理</h1>
    <br>
    <div>
      <ul class="all">
          <li>
              <ui class="select">
              <li><el-button type="success" round @click="selectAddrByUserId">查询</el-button></li>
              <li><el-input placeholder="请输入内容" v-model="input" clearable class="input"></el-input></li>
              </ui>
          </li>
          <li>
              <ui class="btn">
              <li><el-button type="warning" round @click="refresh">刷新</el-button></li>
              <li><el-button type="warning" round @click="addNewAddr">添加</el-button></li>
              </ui>
          </li>
      </ul>
 </div>

<el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="3" label="addr_id" width="200"></el-table-column>
        <el-table-column prop="2" label="user_id" width="200"></el-table-column>
        <el-table-column prop="0" label="lon" width="175"></el-table-column>
        <el-table-column prop="1" label="lat" width="175"></el-table-column>
        <el-table-column prop="4" label="time" width="200"></el-table-column>
        <el-table-column label="修改" width="146">
            <template slot-scope="scope">
                <el-button type="primary" size="small" @click="change(scope.row)">修改</el-button>
            </template>
            
        </el-table-column>
        <el-table-column label="删除" width="146">
            <template slot-scope="scope">
                <el-button type="danger" size="small" @click="del(scope.row)">删除</el-button>
            </template>
            
        </el-table-column>
</el-table>

<el-dialog title="修改信息" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="用户Id" :label-width="formLabelWidth">
      <el-input v-model="datas[2]" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="经度" :label-width="formLabelWidth">
      <el-input v-model="datas[0]" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="纬度" :label-width="formLabelWidth">
      <el-input v-model="datas[1]" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="时间" :label-width="formLabelWidth">
      <el-input v-model="datas[4]" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="changes">确 定</el-button>
  </div>
</el-dialog>

<el-dialog title="添加" :visible.sync="dialogFormVisibleT">
  <el-form :model="form">
    <el-form-item label="用户Id" :label-width="formLabelWidth">
      <el-input v-model="newInfo[1]" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="经度" :label-width="formLabelWidth">
      <el-input v-model="newInfo[2]" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="纬度" :label-width="formLabelWidth">
      <el-input v-model="newInfo[3]" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="time" :label-width="formLabelWidth">
      <el-input v-model="newInfo[4]" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisibleT = false">取 消</el-button>
    <el-button type="primary" @click="addAddrSure">确 定</el-button>
  </div>
</el-dialog>

  </div>
</template>

<script>
export default {
  name: 'addr',
  data () {
      return {
        tableData:[],
        dialogTableVisible: false,
        dialogFormVisible: false,
        dialogFormVisibleT:false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        datas:[],
        formLabelWidth: '120px',
        input:"",
        newInfo:[]
        }
    },
    mounted () {//页面创建完成后立即调用
      this.selectAll()
    },
    methods: {//用时才用
      selectAll(){
        this.axios({
          method : 'POST',
          url : 'http://192.168.1.7:5001/selectAllAddr',
          data : {
                    
          },
          headers:{
              'Content-Type': 'application/json' //以json格式传输
          }
        })
        .then((res)=>{
              this.tableData= res.data
        })
      },
      change(data){
        console.log(data)
        this.datas = data
        this.dialogFormVisible = true
      },
      del(data){
        console.log(data[3])
        this.datas = data
        if(confirm("确定要删除这条信息吗")){
            this.axios({
            method : 'POST',
            url : 'http://192.168.1.7:5001/deleteAddrById',
            data : {
                id:this.datas[3]
            },
            headers:{
                    'Content-Type': 'application/json' //以json格式传输
                }
            })
            .then((res)=>{
                console.log(res.data)
                this.$message({
                    message: '删除成功',
                    type: 'success'
                  });
            })
            this.selectAll()
        }
        else{
            this.$message({
                  message: '取消成功',
                  type: 'success'
            });
        }

      },
      changes(){
        this.axios({
          method : 'POST',
          url : 'http://192.168.1.7:5001/changeAddr',
          data : {
              id:this.datas[3],
              userId:this.datas[2],
              long:this.datas[0],
              lant:this.datas[1],
              time:this.datas[4]
          },
          headers:{
              'Content-Type': 'application/json' //以json格式传输
          }
        })
        .then((res)=>{
          this.$message({
              message: '修改成功',
              type: 'success'
          });
        })
        this.dialogFormVisible = false
      },
      selectAddrByUserId(){
        console.log(this.username)
        this.axios({
        method : 'POST',
        url : 'http://192.168.1.7:5001/selectAddrByUserId',
        data : {
            userId:this.input
        },
        headers:{
                'Content-Type': 'application/json' //以json格式传输
            }
        })
        .then((res)=>{
            console.log(res.data)
            this.tableData=res.data
        })
      },
      refresh(){
        this.selectAll()
      },
      addNewAddr(){
        this.dialogFormVisibleT = true
      },
      addAddrSure(){
        console.log(this.newInfo)
        this.axios({
          method : 'POST',
          url : 'http://192.168.1.7:5001/addNewAddr',
          data : {
              userId:this.newInfo[1],
              lon:this.newInfo[2],
              lat:this.newInfo[3],
              time:this.newInfo[4]      
          },
          headers:{
              'Content-Type': 'application/json' //以json格式传输
          }
        })
        .then((res)=>{
              console.log(res.data)
              this.$message({
              message: '添加成功',
              type: 'success'
          });
          this.dialogFormVisibleT=false
          this.selectAll()
        })
      }
    }
}
</script>

<style scoped>
.input{
    width: 350px;
 }
 .select li{
    float: right;
    list-style-type: none;
 }
 .btn{
    position: absolute;
    left: 250px;
 }
 .btn li{
    float: left;
    list-style-type: none;
 }
 .all li{
    float: right;
    list-style-type: none;
 }
</style>